<template>
  <el-header height="60.5px">
    <el-container>
      <router-link to="/">
        <img src="../../assets/index.png" style="height:3.5rem; width:11.63rem" />
      </router-link>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#398dee"
          text-color="#b8d6f9"
          active-text-color="#e0ebf9"
          router
      >
        <el-menu-item
            v-for="item in navItems"
            :index="item.index"
        >
          {{item.name}}
        </el-menu-item>
        <el-submenu index="/user">
          <template slot="title" ><i class="el-icon-user" style="color: white"></i>学生</template>
          <el-menu-item index="/user/info">
            个人资料
          </el-menu-item>
          <el-menu-item index="/user/account">
            资金管理
          </el-menu-item>
          <el-menu-item index="/user/address">
            地址管理
          </el-menu-item>
          <el-menu-item index="/user/out">
            退出
          </el-menu-item>
        </el-submenu>
        <!--        <el-menu-item index="curriculum">班级课程</el-menu-item>
                <el-menu-item index="order">我的订单</el-menu-item>
                <el-menu-item index="return" >退书/退款申请</el-menu-item>
                <el-menu-item index="news">消息</el-menu-item>-->
      </el-menu>
      <div id="countdown" class="countdown">未设置</div>
    </el-container>
  </el-header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: '/curriculum',
      navItems: [
        { name: "班级课程", index: "/curriculum" },
        { name: "我的订单", index: "/order"},
        { name: "退书/退款申请", index: "/return" },
        { name: "消息", index: "/news" }
      ],
    };
  },
  mounted() {
    this.defaultActive();
  },
  watch: {

  },
  computed: {
  },
  methods: {
    defaultActive() {
      if (this.$route.path === '/') {
        this.activeIndex = '/curriculum'
      } else {
        this.activeIndex = this.$route.path
      }
    },
  }
}
</script>

<style scoped>
.el-header {
  background-color: #398dee;
  color: #333333;
  text-align: center;
}
.el-menu {
  margin: 0 auto;
}
.el-container {
  margin: 0 300px;
}
.countdown {
  position: absolute;
  right: 330px;
  top: 18px;
  color: #fff9e8;
  font-size: 16px;
}
</style>
